<script lang="ts" setup>
import FormatFormVue from "@/Components/FormatForm.vue";
import CreateRoleVue from "./Components/CreateRole.vue";
import UpdateRoleVue from "./Components/UpdateRole.vue";
import AssignPermissionVue from "./Components/AssignPermission.vue";

import { ref, reactive, onBeforeMount, watch } from "vue";
import { ElMessageBox, ElTable, Action } from "element-plus";
import { Plus, Edit, Position, Close } from "@element-plus/icons-vue";
import { GeneralStatusTypeFilter, GeneralStatusFilter } from "@/utils/filters";
import { RoleApi } from "@/Api";

const form = reactive<RouterConfig.Search>({
   label: ""
});
const formOptions = reactive<FormOptions<RouterConfig.Search>>({
   label: {
      type: "text",
      placeholder: "角色名称"
   }
});
const tableData = ref<Role.Table[]>();
const showCreate = ref(false);
const showUpdata = ref(false);
const showAssignPermission = ref(false);
const loadingTable = ref(false);
const actionValue = ref<Role.Table>();

watch([showCreate, showUpdata], value => {
   if (!value[0]) submit();
   if (!value[1]) submit();
});

async function submit() {
   loadingTable.value = true;

   try {
      const { code, data } = await RoleApi.Search();
      if (code === 200) {
         tableData.value = data;
      }
   } catch (error) {
      console.log("error", error);
   }

   loadingTable.value = false;
}

/** 分配权限 */
function assignPermission(value: Role.Table) {
   actionValue.value = value;
   showAssignPermission.value = true;
}

/** 删除账户 */
async function deleteRole(id: string) {
   try {
      ElMessageBox.confirm("删除当前角色?", "警告", {
         confirmButtonText: "确定",
         type: "warning",
         callback: async (action: Action) => {
            if (action === "confirm") {
               const { code } = await RoleApi.Delect({ id });
               if (code === 200) {
                  ElMessage.success("删除成功");
                  await submit();
               }
            }
         }
      });
   } catch (error) {
      console.log("error", error);
   }
}

/** 编辑角色 */
function updateRole(value: Role.Table) {
   actionValue.value = value;
   showUpdata.value = true;
}

onBeforeMount(async () => {
   await submit();
});
</script>

<template>
   <div class="main">
      <div class="content">
         <FormatFormVue :form="form" :form-options="formOptions">
            <template #button>
               <el-button :icon="Plus" type="primary" @click="showCreate = true"> 添加角色 </el-button>
            </template>
         </FormatFormVue>
         <div class="tabBox shadowCard">
            <el-table
               v-loading="loadingTable"
               :data="tableData"
               stripe
               border
               highlight-current-row
               empty-text="暂无数据"
               tooltip-effect="light"
               row-key="id">
               <el-table-column prop="name" label="角色名称" min-width="200">
                  <template #default="{ row }: { row: Role.Table }">
                     <span class="name"> {{ row.name }} <span v-if="row.super_admin">(超级管理员)</span> </span>
                  </template>
               </el-table-column>
               <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }: { row: Role.Table }">
                     <span class="status">
                        <el-tag :type="GeneralStatusTypeFilter[row.status]">
                           {{ GeneralStatusFilter[row.status] }}
                        </el-tag>
                     </span>
                  </template>
               </el-table-column>
               <el-table-column label="操作" width="210" align="center">
                  <template #default="{ row }: { row: Role.Table }">
                     <el-link :icon="Position" type="primary" @click="assignPermission(row)">分配权限</el-link>
                     <el-link :icon="Edit" type="primary" @click="updateRole(row)">编辑</el-link>
                     <el-link :icon="Close" type="danger" :disabled="row.super_admin" @click="deleteRole(row.id)">
                        删除
                     </el-link>
                  </template>
               </el-table-column>
            </el-table>
         </div>
      </div>

      <CreateRoleVue v-model="showCreate" />
      <UpdateRoleVue v-model="showUpdata" :value="actionValue" />
      <AssignPermissionVue v-model="showAssignPermission" :value-id="actionValue?.id" />
   </div>
</template>

<style lang="scss" scoped>
.main {
   width: 100%;
   height: 100%;
}

.content {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.tabBox {
   flex: 1;
   width: 100%;
   position: relative;
   box-sizing: border-box;
   padding: 15px;
   .el-table {
      position: absolute;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
   }
}

.status {
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
}

.action {
   cursor: pointer;
   margin-left: 10px;
}

.el-link {
   margin-inline: 5px;
}

.name {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   > span {
      color: red;
   }
}
</style>
